<template>
  <div class="login-container">
    <div class="logo" />

    <div class="form">
      <h1>登录</h1>
      <el-card shadow="never" class="login-card">
        <!--登录表单-->
        <!-- model绑定数据模型，rules绑定规则模型 -->
        <!--
            ele-ui 的验证规则：
                1. 先给el-form绑定数据模型和规则模型
                2. 给输入框绑定数据
                3. 定义数据模型和规则模型
        -->
        <el-form ref="form" :model="loginForm" :rules="loginRules">
          <el-form-item prop="mobile">
            <el-input
              v-model="loginForm.mobile"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              show-password
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">
              用户平台使用协议
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 350px"
              type="primary"
              @click="login"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
        <el-button type="danger" @click="refresh">页面刷新</el-button>
      </el-card>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { Message } from 'element-ui'
export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                mobile: process.env.NODE_ENV === 'production' ? '' : '13800000002',
                password: process.env.NODE_ENV === 'production' ? '' : '123456',
                isAgree: !(process.env.NODE_ENV === 'production')
            },
            loginRules: {
                // 校验规则数组
                mobile: [
                    // required 必填，message 错误提示，trigger 触发条件blur，失去焦点验证
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '手机号格式不正确',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 16,
                        message: '密码长度应该为6-16位之间',
                        trigger: 'blur'
                    }
                ],
                isAgree: [
                    {
                        validator: (rule, value, callback) => {
                            // rule规则,value传入数据，callback回调函数
                            value
                                ? callback() // 无传值，即成功
                                : callback(new Error('没有勾选用户平台协议')) // 传入一个 error 的错误对象即错误
                        }
                    }
                ]
            }
        }
    },
    computed: {
        ...mapState('user', ['token'])
    },
    methods: {
        ...mapActions('user', ['loginGetToken']),
        async login() {
            // 获取实例方法
            this.$refs.form.validate(async isOK => {
                if (isOK) {
                    // isOK 的值为布尔值
                    // 发送异步请求token
                    // 调用vuex的getters，这个方法会去调用接口
                    await this.loginGetToken(this.loginForm)
                    // Vuex中 actions 返回的也是一个 promise
                    // 接口没有报错，跳转首页
                    Message({ type: 'success', message: '登录成功' })
                    this.$router.push('/')
                }
            })
        },
        refresh() {
            // 刷新页面
            this.$message.success('刷新成功')
            setTimeout(() => {
                location.reload()
            }, 200)
        }
    }
}
</script>
<style lang="scss">
.login-container {
    display: flex;
    align-items: stretch;
    height: 100vh;
    .logo {
        flex: 3;
        background: rgba(38, 72, 176) url(../../assets/common/login_back.png)
            no-repeat center / cover;
        border-top-right-radius: 60px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        padding: 0 100px;
        .icon {
            background: url(../../assets/common/logo.png) no-repeat 70px center /
                contain;
            width: 300px;
            height: 50px;
            margin-bottom: 50px;
        }
        p {
            color: #fff;
            font-size: 18px;
            margin-top: 20px;
            width: 300px;
            text-align: center;
        }
    }
    .form {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 176px;
        .el-card {
            border: none;
            padding: 0;
        }
        h1 {
            padding-left: 20px;
            font-size: 24px;
        }
        .el-input {
            width: 350px;
            height: 44px;
            .el-input__inner {
                background: #f4f5fb;
            }
        }
        .el-checkbox {
            color: #606266;
        }
    }
}
</style>
